import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Card, Table, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  getVersionList,
  getTemplateList,
} from '@/services/setting/manage'
import GapBlock from '@/components/GapBlock'
import moment from 'moment'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const columns = [
  {
    title: "序号",
    dataIndex: 'index',
    key: 'index',
    render: (t, r, i) => <>{i + 1}</>
  },
  {
    title: "模板id",
    dataIndex: 'template_id',
    key: 'template_id',
  },
  {
    title: "模板名称",
    dataIndex: 'source_miniprogram',
    key: 'source_miniprogram',

  },
  {
    title: "提交时间",
    dataIndex: 'createTime',
    key: 'createTime',
    render: (t) => moment(t).format('YYYY-MM-DD')
  },
  {
    title: "提交人",
    dataIndex: 'developer',
    key: 'developer',

  },
  {
    title: "描述",
    dataIndex: 'user_desc',
    key: 'user_desc',

  },
]
const Wx = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState({})
  const [tmpData, setTmpData] = useState([])

  useEffect(() => {
    init()
    fetchTableData()
  }, [])

  const init = async params => {
    const res = await getVersionList(params)
    res.code == 0 ? setData(res.data) : message.warn(res.msg)
  }

  const fetchTableData = async params => {
    const res = await getTemplateList(params)
    res.code == 0 ? setTmpData(res.data) : message.warning(res.msg)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <RenderButtom click={handleBtn} />
      <Card  title="模板管理">
        <Table 
          columns={columns}
          dataSource={tmpData}
        />
      </Card>
      <GapBlock />
      <Card  title="线上版本">
        {!data.releaseVersion ? '你暂无线上版本' : null}
      </Card>
      <GapBlock />
      <Card  title="审核版本">
        {!data.auditVersion ? '你暂无提交审核的版本或者版本已发布上线' : null}
      </Card>
      <GapBlock />
      <Card  title="开发版本">
        {!data.devVersion ? '你暂无开发的版本' : null}
      </Card>
    </PageHeaderWrapper>
    )
}

export default Form.create()(Wx)
